<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>My monitor</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <link rel="stylesheet" href="../static/css/view.css">
    <link rel="stylesheet" type="text/css" href="../static/css/style.css">
<!--     <link rel="stylesheet" type="text/JavaScript" href="../static/js/jquery-3.5.1.js">-->
<script type="text/JavaScript" src="{{ url_for('static',filename='/js/jquery-3.5.1.js') }}"></script>
    <script type="text/javascript" src="../static/layui/layui.js"></script>

</head>
<body class="layui-layout-body"  >

<div class="layui-layout layui-layout-admin">
    <div class="layui-header sideback">
        <div class="layui-logo"><i class="layui-icon" >&#xe65d;</i> 宿舍监控管理系统</div>

        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item" >
                <a href="javascript:;" name="side"><i class="layui-icon">&#xe668;</i></a>
            </li>
        </ul>

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><a href="/main"><i class="layui-icon" style="font-size: 20px;">&#xe68e;</i>&nbsp home</a></li>

            <li class="layui-nav-item"><a href="/exit"><i class="layui-icon" style="font-size: 15px; color: #1E9FFF;">&#xe682;</i>退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black sideback">
          <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree sidestyle"  lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed"><a href="javascript:;"><i class="layui-icon" >&#xe68e;</i>  <span>查看宿舍</span></a>
                <dl class="layui-nav-child">
                <dd ><a href="roomstatus"><i class="layui-icon" >&#xe68c;</i>  <span>宿舍状态</span></a></dd>
                <dd ><a href="#"><i class="layui-icon" >&#xe613;</i>  <span>宿舍成员</span></a></dd>
                 <dd ><a href="records"><i class="layui-icon" >&#xe6ed;</i>  <span>监控记录</span></a></dd>
                </dl>
                </li>

                <li class="layui-nav-item layui-nav-itemed"><a href="javascript:;"><i class="layui-icon" >&#xe615;</i>  <span>个人空间</span></a>
                <dl class="layui-nav-child">
                <dd ><a href="vieweditaccount"><i class="layui-icon" >&#xe66f;</i>  <span>我的信息</span></a></dd>

                <dd ><a href="/viewtimetable"><i class="layui-icon" >&#xe62d;</i>  <span>我的课表</span></a></dd>
                </dl>
                </li>

            </ul>
        </div>
    </div>
<div class="layui-body">
        <!-- 内容主体区域 -->
         <div class="container0">
             <label class="lab__status0" >宿舍: {{roomstatus.roomid}}</label>
{#             <input type="text" name="roomId" id="roomId"  class="input" value="{{roomstatus.roomid}}" hidden/>#}
         </div>
        <div class="status__inline">
        <div class="container1">
          <img class="img__status" src="../static/images/thermo.png" >
            <label class="lab__status">温度</label>
          <label class="lab__status">{{roomstatus.temperature}}℃</label>
{#            <input type="text" name="temperature" id="temperature" placeholder="27℃" class="ipt__status"/>#}
        </div>
        <div class="container1">
            <img class="img__status" src="../static/images/mois.png">
             <label class="lab__status">湿度</label>
             <label class="lab__status">{{roomstatus.moisture}}%</label>
{#            <input type="text" name="moisture" id="moisture" placeholder="湿度" class="ipt__status" />#}
        </div>
       <div class="container1">
         <img class="img__status" src="../static/images/electric.png">
             <label class="lab__status">电费</label>

             <label class="lab__status">250</label>


{#             <input type="text" name="electricity" id="electricity" placeholder="on" class="ipt__status"  />#}
        </div>
        <div class="container1">
          <img class="img__status" src="../static/images/gate.png">
             <label class="lab__status">门禁</label>
           {% if roomstatus.door==1 %}
             <label class="lab__status">on</label>
            {% else %}
            <label class="lab__status">off</label>
            {% endif %}
{#            <input type="text"  name="door" id="door" placeholder="close" class="ipt__status" />#}
        </div>
        </div>
{#           <input type="button" onclick="update()" class="btn__status" value="模拟"/>#}
</div>
<script type="text/javascript">
        function update() {
            var roomId = document.getElementById("roomId").value;
            var temperature = document.getElementById("temperature").value;
            var moisture = document.getElementById("moisture").value;
            var door = document.getElementById("door").value;
            var electricity = document.getElementById("electricity").value;
            $.ajax({
                type: "POST",
                dataType: "json",
                url: '/updateStatus',
                contentType: "application/json",
                data:JSON.stringify({
                    "roomId": roomId,
                    "temperature": temperature,
                    "moisture":moisture,
                    "door":door,
                    "electricity":electricity
                }),
                success: function (result) {
                    console.log("data is :" + result)
                    console.log(result.code)
                    if (result.code == 201) {
                        alert("温度异常");
                        window.location.href = "video";
                    }else if(result.code == 202){
                        alert("湿度异常");
                        window.location.href = "video";
                    }else if(result.code == 203){
                        alert("门禁异常");
                       window.location.href = "video";
                    }else if(result.code == 202){
                        alert("用电异常");
                        window.location.href = "video";
                    }else if(result.code == 200){
                        alert("保存成功");
                        window.location.href = "roomStatus";
                    }else{
                        alert("保存失败");
                       window.location.href = "roomStatus";
                    }
                }
            });
        }
    </script>
    <div class="layui-footer">
        <div class="section">
            <p><sub>Copyright <a href="http://www.csu.edu.cn">Central South University</a> </sub></p>
        </div>
    </div>
</div>

<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;

  //…
});
</script>





<script src="../static/layui/layui.js"></script>



</body>
</html>
























